<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>Timer</title>
        <meta name="viewport" content="width=device-width, initial-scale=0.8, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="./index.css"/>
        <script src="./calendar.js"></script>
    </head>

    <body>
        <p id="time"></p>
        <p id="date"></p>
        <svg width="400" height="400" id="player1">
            <circle class="dynamic" id="C1" cx="200" cy="200" r="190" transform="rotate(90 200 200)"/>
            <circle class="dynamic" id="C2" cx="200" cy="200" r="170" transform="rotate(90 200 200)"/>
            <circle class="dynamic" id="C3" cx="200" cy="200" r="150" transform="rotate(90 200 200)"/>

            <line id="X" x1="0" y1="200" x2="400" y2="200"/>
            <line id="X" x1="200" y1="0" x2="200" y2="400"/>
            <line id="X" x1="58.578" y1="58.578" x2="341.421" y2="341.421"/>
            <line id="X" x1="58.578" y1="341.421" x2="341.421" y2="58.578"/>

            <circle id="WT" cx="200" cy="200" r="140"/>
            <!-- r=75 or r=140 -->
            <circle id="CK" cx="200" cy="200" r="197.5"/>
            <circle id="CK_ID" cx="200" cy="200" r="170"/>
            <!-- transform="rotate(-0.85 200 200)" -->
            <defs>
                <linearGradient id="myLinearGradient1">
                    <stop offset="0%" stop-color="#000" stop-opacity="1"/>
                    <stop offset="100%" stop-color="#fff" stop-opacity="1"/>
                </linearGradient>
            </defs>
        </svg>
        <script type="text/javascript">
            // 获取当前时间
            var vWeek,
                vWeek_s,
                vDay;
            L = calendar.solar2lunar();
            pi = 3.1415926535897932384;
            q2 = 141.4213562373;
            vWeek = [
                "星期天",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
            ];
            var date = new Date();
            function time() {
                date = new Date();
                year = set0(date.getFullYear(), 4);
                month = set0(date.getMonth() + 1);
                day = set0(date.getDate());
                hours = set0(date.getHours());
                minutes = set0(date.getMinutes());
                seconds = set0(date.getSeconds());
                vWeek_s = date.getDay();
                c1 = 190 * pi * 2;
                c2 = 170 * pi * 2;
                c3 = 150 * pi * 2;
                Y=365.25
                k1 = (date.getHours() + date.getMinutes() / 60) / 24; // 一日
                k2 = (L.lDay-1 + date.getHours()/24) / 30; // 一月
                k3 = ((date.getMonth()-0)*(Y/12) + (date.getDate()-1) + 10) / Y; // 一年
                // k1 = (2 * 30.5 + 4 - 35 -31) / 365.25; 
                if(k3<0)k3+=1;
                if(k3>1)k3-=1;
                k9 = (date.getSeconds() + 1) / 60; // 一分
                document.querySelector("#C1").setAttribute("stroke-dashoffset", c1 * (1 - k1));
                document.querySelector("#C2").setAttribute("stroke-dashoffset", c2 * (1 - k2));
                document.querySelector("#C3").setAttribute("stroke-dashoffset", c3 * (1 - k3));

                document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
                document.getElementById("date").innerHTML = month + "月" + day + "日 " + vWeek[vWeek_s];
            }
            function set0(num, p = 2) {
                return("000000000" + num).slice(- p);
            }

            timer=setInterval(time, 1000);
            time();
            let timerContainer = null;
            // let pipWindow = null;
            bt.addEventListener("click", async () => {
                const player = document.querySelector("#player1");
                console.log(player)
                // 打开一个画中画窗口。
                const pipWindow = await documentPictureInPicture.requestWindow();

                // 将播放器移动到画中画窗口中。
                pipWindow.document.body.append(player);
            });


        </script>
    </body>

</html>
